import React from "react";
import {
	Chart,
	Geom,
	Line,
	Axis,
	Tooltip,
	Coord, 
	Coordinate,
	Interaction,
	getTheme,
	Interval
} from "bizcharts";
import { Card, Col, Row, Statistic } from "antd";
import { RobotOutlined, DingdingOutlined } from '@ant-design/icons';
// import numeral from 'numeral';


class AccountType extends React.Component {
	constructor(props){
        super(props);
        this.state = {
			time_range_start: null,
      		time_range_end: null,
		}
	}

	//处理函数  时间框值改变时候
	handleRangeChange = value => {
		console.log(value)
		this.setState({
			time_range_start: value[0],
			time_range_end: value[1],
		})
	}

	render() {
        console.log(this.props)
        const data_oa = this.props.chartProps
		const data_robot = this.props.chartProps_robot
		const data_robot_type = this.props.robot_record_type
		const data_robot_curve = this.props.robot_record_curve
        const scale = {
            account_type:{
              alias:'OA账号申请统计' // 别名
            },
			nums:{
				alias:'次数' // 别名
			}
        };
		const scale_robot_curve = {
			value: {min: 0},
            days:{
              alias:'每日调用次数统计' // 别名
            },
			counts:{
				alias:'次数' // 别名
			}
        };
		const label = {
			offset: 20,
			rotate: Math.PI / 7,
		}

		const cols = {
			name:{
				alias:'用户' // 别名
			},
			count:{
				alias:'机器人调用次数' // 别名
			}
		};
		// robot type
		const cols3 = {
			percent: {
				formatter: val => {
					val = val * 100 + '%';
					return val;
				},
			},
		};

		return (
            <div>
				<Row gutter={16}>
					<Col span={12}>
					<Card>
						<Statistic
							title="OA流程申请"
							value={this.props.os_today_number}
							valueStyle={{ color: '#3f8600' }}
							prefix={<DingdingOutlined />}
							suffix="次"
						/>
					</Card>
					</Col>
					<Col span={12}>
					<Card>
						<Statistic
							title="机器人调用"
							value={this.props.robot_today_number}
							valueStyle={{ color: '#3f8600' }}
							prefix={<RobotOutlined />}
							suffix="次"
						/>
					</Card>
					</Col>
				</Row>
				<Row gutter={16}>
					<Col span={12}>
						<Card>
							<Chart height={300} data={data_oa} scale={scale} autoFit>
								<Interval position="account_type*nums" label="nums"/>
								<Tooltip shared/>
								<Axis name="account_type" title label={label} />
								<Axis name="nums" title/>
							</Chart>
						</Card>
					</Col>
					<Col span={12}>
						<Card>
							<Chart scale={scale_robot_curve} padding={[10,20,50,50]} autoFit height={300} data={data_robot_curve} >
								<Line
								shape="smooth"
								position="days*counts"
								color="l (270) 0:rgba(255, 146, 255, 1) .5:rgba(100, 268, 255, 1) 1:rgba(215, 0, 255, 1)"
								/>
								<Axis name="days" title/>
								<Axis name="counts" title/>
							</Chart>
						</Card>
					</Col>
				</Row>
				<Row gutter={16}>
				<Col span={12}>
				<Card>
					<Chart
						height={400}
						data={data_robot}
						scale={cols}
						padding="auto"
						autoFit
					>
						<Coord transpose />
						<Axis name="name" title/>
						<Axis name="count" title/>
						<Tooltip />
						<Geom
							type="interval"
							position="name*count"
							color={['count', '#E6F6C8-#3376CB']}
							// label={['name*count', (name, value) => numeral(value || 0).format('0.0%')]}
							label="count"
						>
						</Geom>
					</Chart>
				</Card>
				</Col>

				<Col span={12}>
					<Card>
						<Chart height={400} data={data_robot_type} scale={cols3} autoFit onIntervalClick={e=>{
							// const states = e.target.cfg.element.getStates();// 如果是选中，值为['selected'];取消选中，值为[]
						}}>
							<Coordinate type="theta" radius={0.75} />
							<Tooltip showTitle={false} />
							<Axis visible={false} />
							<Interval
								position="percent"
								adjust="stack"
								color="type"
								style={{
									lineWidth: 1,
									stroke: '#fff',
								}}
								label={['count', {
									content: (data) => {
										return `${data.type}: ${data.percent * 100}%`;
									},
								}]}
								state={{
									selected: {
										style: (t) => {
											const res = getTheme().geometries.interval.rect.selected.style(t);
											return { ...res, fill: 'red' }
										}
									}
								}}
							/>
							<Interaction type='element-single-selected' />
						</Chart>
					</Card>
					</Col>
				</Row>
            </div>
		);
	}
}

export default AccountType
